<template>
  <el-table
    ref="tableListRef"
    :data="tableData"
    height="250"
    style="width: 100%; margin-top: 20px"
    :header-cell-style="{ 'border-bottom': 'none' }"
    :header-row-style="{ height: '60px' }"
    :cell-style="{ height: '60px', 'border-bottom': 'none' }"
    stripe
    @select="select"
    @row-click="selectClick"
    @selection-change="handleSelectChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="服务/商品" />
    <el-table-column prop="basePrice" label="售价" align="center" />
    <el-table-column prop="realPrice" label="售价" align="center" />
    <el-table-column fixed="right" label="详情" align="center">
      <template #default>
        <el-icon @click="lookChange">
          <View />
        </el-icon>
      </template>
    </el-table-column>
  </el-table>
  <div class="totalSize">
    客单费:
    <div>￥{{ kd_price }}</div>
  </div>
  <div class="btnNext">
    <el-button @click="upChange">上一步</el-button>
    <el-button type="primary" @click="sureChange">确认选择</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { servicesList } from '@/api/service/service.js';
import { ElMessage, ElMessageBox } from 'element-plus';

const { kd_price } = defineProps({
  kd_price: {
    type: String,
    default: '',
  },
});

const tableData = ref([]);
const emits = defineEmits(['childClick']);

const tableListRef = ref();
const selectData = ref([]);

getServicesList();
// 获取专家服务列表
function getServicesList() {
  servicesList({
    bigTypeId: '0',
  }).then((res) => {
    tableData.value = res.data.data;
  });
}

function select(selection, row) {
  tableListRef.value.clearSelection();
  if (selection.length == 0) {
    return;
  }

  tableListRef.value.toggleRowSelection(row, true);
}

function handleSelectChange(val) {
  selectData.value = val;
}

function selectClick(row) {
  const selData = selectData.value;
  tableListRef.value.clearSelection();

  if (selData.length == 1) {
    let item = selData[0];
    if (item == row) {
      tableListRef.value.toggleRowSelection(row, false);
    } else {
      tableListRef.value.toggleRowSelection(row, true);
    }
  } else {
    tableListRef.value.toggleRowSelection(row, true);
  }
}

function upChange() {
  emits('upChange', 3, 2);
}

function lookChange() {}

function sureChange() {
  if (selectData.value.length > 0) {
    ElMessageBox.confirm('创建会扣除客单费，确定创建吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      emits('upChange', 3, 0, selectData.value[0]);
    });
  } else {
    ElMessage({
      type: 'warning',
      message: '请选择服务!',
    });
  }
}
</script>
<style lang="scss" scoped>
.totalSize {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  font-weight: bolder;
  margin-top: 20px;

  div {
    font-size: 18px !important;
  }
}

.btnNext {
  display: flex;
  justify-content: center;
  text-align: right;
  margin-top: 40px;
}
</style>
